import Watcher from "./observer/watcher";
import { patch } from "./vnode/patch";

export function mountedComponent(vm, el) {
  // 生命周期渲染之前
  callHook(vm,'beforeMount')
  // vue 渲染流程7 
  
  let updateComponent = ()=>{
    vm._update(vm._render()) // 1. vm._render 将render函数变成vnode  2.vm._update将vnode变成真实dom放到页面上
  }
  // true 表示 当前的Watcher就是用来渲染的
  new Watcher(vm,updateComponent,()=>{
    // callHook(vm, 'beforeUpdate')
    callHook(vm, 'updated')
  },true)
  // 生命周期渲染之后
  callHook(vm,'mounted')
}
export function lifecycleMixin(Vue) {
  // vue 渲染流程8
  Vue.prototype._update = function (vnode) {  // vnode =>真实dom
    const vm = this;
    // 真实的dom 区分一下是首次还是更新
    let prevVnode = vm._vnode // 如果是首次 值为null
    // console.log("prevVnode",prevVnode);
    if(!prevVnode){
      vm.$el = patch(vm.$el,vnode)
      vm._vnode = vnode
    }else{
      patch(prevVnode,vnode)
    }
    
  }
}
// 生命周期调用
// vue 生命周期实现
// 1. Vue.mixin({}) 混入
// 2. 设计模式 订阅发布 合并
export function callHook(vm,hook){
  const handlers = vm.$options[hook]
  if(handlers){
    for (let index = 0; index < handlers.length; index++) {
      handlers[index].call(vm) // 指向当前调用的作用域 不然this找不到
    }
  }
}